<template>
  <div>
    <van-nav-bar
      title="城市列表"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <van-index-bar :index-list="indexList">
      <van-index-anchor index="当前城市" />

      <van-index-anchor index="热门城市" />
      <van-cell v-for="item in hotCity" :key="item.value" :title="item.label" />
    </van-index-bar>
  </div>
</template>

<script>
import { getCity, getHotCity } from '@/api/city'
export default {
  name: 'city',
  data () {
    return {
      citys: [],
      indexList: ['#', '热', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      hotCity: []
    }
  },

  created () {
    this.getCitys()
    this.getHotCitys()
  },

  methods: {
    async getCitys () {
      try {
        const res = await getCity()
        // console.log(res)
        this.citys = res.data.body
      } catch (err) {
        console.log(err)
      }
    },
    async getHotCitys () {
      try {
        const res = await getHotCity()
        console.log(res)
        this.hotCity = res.data.body
      } catch (err) {
        console.log(err)
      }
    }
  }

}
</script>

<style scoped lang="less"></style>
